// 初始化索引
var index = 0;
// 获取图片列表和按钮列表的DOM元素
var imglist = document.getElementById('imglist');
var btnlist = document.getElementById('btnlist');
// 获取轮播点的li元素集合
var arrbtn = btnlist.getElementsByTagName('li');
/* 2秒轮播 */
function btnchange(index) {
    // 遍历轮播点改变背景颜色
    for (var i = 0; i < 5; i++) {
        if (i == index) {
            arrbtn[i].style.backgroundColor = 'pink';
        }
        else {
            arrbtn[i].style.backgroundColor = 'rgba(0,0,0,0.2)';
        }
    }
}
// 给每个轮播点添加索引值，并绑定鼠标悬停事件
for (var i = 0; i < 5; i++) {
    // 添加轮播点的索引值属性
    arrbtn[i].num = i;
    // 鼠标悬停事件
    arrbtn[i].onmouseover = function () {
        // 更新索引值和图片列表的位置
        index = this.num;
        imglist.style.left = index * (-1000) + 'px';
        // 清楚定时器，暂停自动轮播
        clearInterval(t);
        // 更新轮播点的样式
        btnchange(index);
        // 鼠标移出轮播点时重新启动定时器
        this.onmouseout = function () {
            t = setInterval(imgchange, 2000);
        }
    }

}
// 自动轮播函数
function imgchange() {
    // 判断是否到达最后一张图片，是则回到第一张
    if (index == 4)
        index = -1;
    // 更新图片列表的位置和轮播点的样式
    index++;
    imglist.style.left = index * (-1000) + 'px';
    btnchange(index);
}
// 设置定时器，每隔2秒调用一次自动轮播函数
var t = setInterval(imgchange, 2000);